<template>
  <div>
    <Header :title_="title_"></Header>
    <div class="scrollwarp" :style="{ height }">
      <Disitems :disitems="disitems"></Disitems>
    </div>
  </div>
</template>

<script>
//引入滚动
import BetterScroll from "better-scroll";
import Header from "@/components/Header/Header";
import Disitems from "@/components/Discountitems/Disitems2";
export default {
  data() {
    return {
      title_: "数码",
      disitems: [],
      height: 0,
      //滚动对象
      scroll: null
    };
  },
  components: {
    Header,
    Disitems
  },
  mounted() {
    let url = "http://localhost:8080/data/Digital.json";
    this.$axios.get(url).then(ret => {
      // console.log(ret.data);
      this.disitems = ret.data;
      //   console.log(this.disitems);
    });
    // 外层滚动容器高度
    this.height = document.documentElement.clientHeight - 48 + "px";
    console.log(this.height);
  },
  beforeDestroy() {
    this.scroll = null;
  },
  updated() {
    this.$nextTick(() => {
      this.scroll = new BetterScroll(".scrollwarp", {
        click: true
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.scrollwarp {
  // width: 100%;
  overflow: hidden;
}
</style>